import React, { ReactElement, useMemo, useContext, useEffect } from 'react';
import { View } from 'react-native';

import styles from './style';
import LiveArea from '../LiveArea';
import TestResult from '../TestResult';
import LiveEnd from '../LiveEnd';
import DownloadResource from '../DownloadResource';
import ProblemWait from '../ProblemWait';
import Prepare from '../Prepare';
import { Store } from '../../reducer';
import { systemUtil } from '../../../../util/native';
import StudentTalkArea from '../StudentTalkArea';
import ImpromptuArea from '../ImpromptuArea';
import FetchFail from '../FetchFail';
import MicrophoneStatus from '../MicrophoneStatus';
import PPT from '../PPT';
import Panel from '../Panel';
import Control from '../Control';
import Back from '../Back';
import Loading from '../Loading';
import Sound from '../Sound';
import ChatRoom from '../ChatRoom';
import SignIn from '../SignIn';
import ContainerLoading from '../ContainerLoading';
import SignInSuccess from '../SignInSuccess';
import LockScreen from '../LockScreen';
import RollCallImpromptuArea from '../RollCallImpromptuArea';
import { ClassRoomType } from '../../constant';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { showPrepare, type } = state;

  useEffect((): void => {
    systemUtil.setIsSettingMediaVolume(!showPrepare);
  }, [showPrepare]);

  return useMemo(
    (): ReactElement => (
      <View style={styles.container}>
        <Sound />
        <PPT />
        <View style={styles.content} pointerEvents="box-none">
          {type === ClassRoomType.Vod ? <LiveArea /> : <View />}
          <Loading />
          <Control />
          {type === ClassRoomType.Live ? <LiveArea /> : <View />}
          <Prepare />
          <TestResult />
          <ChatRoom />
          <ProblemWait />
          <StudentTalkArea />
          <ImpromptuArea />
          <RollCallImpromptuArea />
          <MicrophoneStatus />
          <Panel />
          <LockScreen />
        </View>
        <SignInSuccess />
        <SignIn />
        <ContainerLoading />
        <DownloadResource />
        <FetchFail />
        <LiveEnd />
        <Back />
      </View>
    ),
    [type]
  );
};
